{% load static %}
<!DOCTYPE html>

<!--
This viewer is based on the in build firefox pdf viewer.
The original file can be found under web/viewer.html of the following prebuilt pdf.js release:
https://github.com/mozilla/pdf.js/releases/download/v5.0.375/pdfjs-5.0.375-dist.zip
Below you can find the license of said base viewer.

--------------------------------------------------------------------------
Copyright 2012 Mozilla Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Adobe CMap resources are covered by their own copyright but the same license:

    Copyright 1990-2015 Adobe Systems Incorporated.

See https://github.com/adobe-type-tools/cmap-resources
-->

<html dir="ltr" mozdisallowselectionprint>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <!-- do not change ./../static as it will break the viewer in the prod container -->
    <script src="../../static/pdfjs/build/pdf.mjs" type="module"></script>
    <link rel="stylesheet" href="../../static/pdfjs/web/viewer.css">
    <link rel="icon" type="image/x-icon" href="{% static 'images/logo_with_circle.svg' %}">
    <script src="../../static/pdfjs/web/viewer.mjs" type="module"></script>
    <script>
      // get the start page
      var page_number = {{ current_page }};

      // open pdf on the start page
      window.addEventListener('load', function() {
          PDFViewerApplication.initialBookmark = "page="+page_number;
          {% if user_view_bool %}
          PDFViewerApplication.open({ url: "{% url 'serve_pdf' pdf_id revision %}" });
          {% else %}
          PDFViewerApplication.open({ url: "{% url 'serve_shared_pdf' shared_pdf_id revision %}" });
          {% endif %}
          // overwrite setTitle so that PdfDing controls the tab's title
          PDFViewerApplication.setTitle = function set_new_title(new_title) {
            const editorIndicator = this._hasAnnotationEditors;
            document.title = `${editorIndicator ? "* " : ""}${"{{ tab_title }}"}`;
          }
      });

      // set properties
      document.addEventListener("webviewerloaded", () => {
        PDFViewerApplicationOptions.set('disablePreferences', true); // needed otherwise settings are not overwritten
        PDFViewerApplicationOptions.set('disableHistory', true); // disable browsing history, clicking on chapters does not open new page
        PDFViewerApplicationOptions.set('viewOnLoad', 1  ); // disable remembering page
        PDFViewerApplicationOptions.set("workerSrc", "../../static/pdfjs/build/pdf.worker.mjs");
      });

      {% if user_view_bool %}
      // check every 3 seconds if remote page needs updating
      setInterval(update_remote_page, 3000);

      // function for updating the remote page
      function update_remote_page() {
        if (PDFViewerApplication.pdfViewer.currentPageNumber != page_number) {
          page_number = PDFViewerApplication.pdfViewer.currentPageNumber;
          set_current_page(page_number);
        }
      }
      {% endif %}

      function set_current_page(current_page) {
        var form_data = new FormData();
        form_data.append('pdf_id', '{{ pdf_id }}')
        form_data.append('current_page', current_page)

        fetch("{% url 'update_page'%}", {
          method: "POST",
          body: form_data,
          headers: {
            'X-CSRFToken': '{{ csrf_token }}',
          },
        });
      }

      {% if user_view_bool %}
      // send file via the fetch api to the backend
      function send_pdf_file(file) {
        var form_data = new FormData();
        form_data.append('updated_pdf', file);
        form_data.append('pdf_id', '{{ pdf_id }}')

        fetch("{% url 'update_pdf'%}", {
          method: "POST",
          body: form_data,
          headers: {
            'X-CSRFToken': '{{ csrf_token }}',
          },
        });
      }

      // function for updating the pdf file in the backend
      async function update_pdf() {
        if (PDFViewerApplication._saveInProgress) {
          return;
        }
        PDFViewerApplication._saveInProgress = true;
        await PDFViewerApplication.pdfScriptingManager.dispatchWillSave();

        try {
          const data = await PDFViewerApplication.pdfDocument.saveDocument();
          const updated_pdf = new Blob([data], {type: "application/pdf"});
          send_pdf_file(updated_pdf);
          PDFViewerApplication._hasAnnotationEditors = false;
          // removes "*" from the tab title in order to signal that the file was successfully saved
          PDFViewerApplication.setTitle("{{ tab_title }}");
        } catch (reason) {
          console.error(`Error when saving the document: ${reason.message}`);
        } finally {
          await PDFViewerApplication.pdfScriptingManager.dispatchDidSave();
          PDFViewerApplication._saveInProgress = false;
        }
      }
      {% endif %}
    </script>
    <style>
      @media all and (max-width: 900px){
        #outerContainer .hiddenMediumView{
          display:none !important;
        }
        #outerContainer .visibleMediumView:not(.hidden, [hidden]){
          display:inline-block !important;
        }
      }
      @media all and (max-width: 750px){
        .hiddenSmallView,
        .hiddenSmallView *{
          display:none !important;
        }
        #toolbarContainer #toolbarViewer .toolbarButtonSpacer{
          width:0;
        }
      }
      select:hover option:hover {
          background-color: red !important;
          color: white !important;
      }
      :root{
        /* elements using the primary color */
        --body-bg-color:rgb({{ primary_color }}); /* background around pdf, sets also sidebar color!*/
        --sidebar-narrow-bg-color:rgb({{ primary_color }}); /* sidebar background around pdf mobile*/
        --treeitem-bg-color:rgb({{ primary_color }});   ;  /* table of contents bg color */
        --treeitem-selected-bg-color:rgb({{ primary_color }});  /* table of contents selected bg color */
        --scrollbar-bg-color:rgb({{ primary_color }});  /* scrollbar background color */
        --toolbar-border-color:rgb({{ primary_color }});  /* toolbar border color */
        --progressBar-bg-color:rgb({{ primary_color }});  /* progressbar background color */
        /* elements using the secondary color */
        --field-bg-color:rgb({{ secondary_color }});  /* input field bg color */
        --toolbar-bg-color:rgb({{ secondary_color }});  /* toolbar color */
        --dropdown-btn-bg-color:rgb({{ secondary_color }});  /* dropdown button color */
        --sidebar-toolbar-bg-color:rgb({{ secondary_color }});  /* sidebar toolbar bg color */
        /* elements using the text color */
        --main-color:rgb({{ text_color }});   /* main text */
        --toolbar-icon-bg-color:rgb({{ text_color }});  /* toolbar icon image color */
        --field-color:rgb({{ text_color }});  /* input field text color */
        --treeitem-color:rgb({{ text_color }});  /* table of contents text color */
        --field-border-color:rgb(115 115 115);  /* input field bordercolor */
        /* buttons hover and selected color */
        --toolbar-icon-hover-bg-color:rgb(226 232 240);  /* toolbar icon hover image color */
        --dropdown-btn-hover-bg-color:rgb(226 232 240);  /* dropdown button hover color */
        --toggled-btn-color:rgb(226 232 240);  /* toolbar icon selected color */
        /* elements using the theme color */
        --button-hover-color: rgb({{ theme_color }});  /* button hover */
        --progressBar-color:rgb({{ theme_color }});  /* progressbar color */
        --toggled-btn-bg-color:rgb({{ theme_color }} / 0.9);  /* dropdown toggled color */
        --scrollbar-color:rgb({{ theme_color }});  /* scroll indicator color */
        --treeitem-hover-color:rgb({{ theme_color }});  /* table of contents hover text color */
        --treeitem-selected-color:rgb({{ theme_color }});  /* table of contents selected text color */
        --thumbnail-hover-color:rgb({{ theme_color }} / 0.3);  /* thumbnail hover bg color */
        --thumbnail-selected-color:rgb({{ theme_color }} / 0.7);  /* thumbnail selected bg color */
      }
      .textLayer .highlight {
        --highlight-bg-color: rgb({{ theme_color }} / 0.2);  /* thumbnail hover bg color */
        --highlight-selected-bg-color: rgb({{ theme_color }} / 0.5);  /* thumbnail hover bg color */
      }
      .button1 {
        background-color:rgb({{ secondary_color }});
        color:rgb({{ text_color }});
        border-width: 0px;
        margin: 2px 1px;
        padding: 3px 4px 0;
      }
      .button1:hover {
        background-color: rgb({{ theme_color }});
        color: rgb(226 232 240);
        border-radius: 2px
      }
      .pdfSidebarNotification::after {
        background-color: rgb({{ theme_color }});
      }
      .doorHanger, .doorHangerRight {
          background-color: rgb({{ secondary_color }});
      }
      dialog {
          background-color: rgb({{ secondary_color }});
      }
      .editorParamsToolbarContainer {
        background-color:rgb({{ secondary_color }});
      }
      .horizontalToolbarSeparator {
        border-top: 1px solid rgb({{ text_color }});
        opacity: 0.2;
      }
      .splitToolbarButtonSeparator{
        border-left:1px solid rgb({{ text_color }});
        opacity: 0.5
      }
      .toolbarField:focus{
        border-color: rgb({{ theme_color }});
      }
      <!-- right sidebar -->
      .toolbarButton::before{
        color: rgb({{ text_color }});
      }
      .toolbarButton.labeled:hover{
        color: rgb({{ text_color }});
      }
      .toolbarButton.labeled:hover{
        color: rgb({{ text_color }});
      }
      .toolbarButton.labeled::before {
          background-color: rgb({{ text_color }});
      }
      .toolbarButton.toggled:hover{
        color: rgb({{ text_color }});
      }
      .toolbarButton.toggled::before {
          background-color: rgb({{ text_color }});
      }
      .toolbarButton.toggled {
          color: rgb({{ text_color }});
      }
      .toolbarButton.toggled:hover{
        color: rgb({{ text_color }});
      }
      .logo {
         width: 22px;
         height: 22px;
         background: rgb({{ theme_color }});
         border-radius: 50%;
         opacity: 0.9;
         padding: 3px;
         margin: 0px 4px;
      }
      .treeItemToggler::before {
        background-color:rgb({{ text_color }});
      }
      {% if request.user.profile.pdf_inverted_mode == 'Enabled' %}
      #viewerContainer > #viewer .page {
        filter: grayscale(100%);
        filter: invert(80%);
      }
      {% endif %}
    </style>
  </head>

  <body>
    <div id="outerContainer">
      <div id="sidebarContainer">
        <div id="toolbarSidebar" class="toolbarHorizontalGroup">
          <div id="toolbarSidebarLeft">
            <div id="sidebarViewButtons" class="toolbarHorizontalGroup toggled">
              <button id="viewThumbnail" class="toolbarButton toggled" type="button" title="Thumbnails">
                 <span>Thumbnails</span>
              </button>
              <button id="viewOutline" class="toolbarButton" type="button" title="Table of Contents">
                 <span>Document Outline</span>
              </button>
            </div>
          </div>
          <div id="toolbarSidebarRight">
            <div id="outlineOptionsContainer" class="toolbarHorizontalGroup">
              <div class="verticalToolbarSeparator"></div>
              <button id="currentOutlineItem" class="toolbarButton" type="button" disabled="disabled" title="Current Position">
                <span>Current Outline Item</span>
              </button>
            </div>
          </div>
        </div>
        <div id="sidebarContent">
          <div id="thumbnailView"></div>
          <div id="outlineView" class="hidden"></div>
        </div>
        <div id="sidebarResizer"></div>
      </div>  <!-- sidebarContainer -->
      <div id="mainContainer">
        <div class="toolbar">
          <div id="toolbarContainer">
            <div id="toolbarViewer" class="toolbarHorizontalGroup">
              <div id="toolbarViewerLeft" class="toolbarHorizontalGroup">
                <button id="sidebarToggleButton" class="toolbarButton" type="button"></button>
                <div class="splitToolbarButtonSeparator hiddenSmallView" style="margin: 4px;"></div>
                <div class="toolbarButtonWithContainer">
                  <button id="viewFindButton" class="toolbarButton" type="button" title="Search"></button>
                  <div class="hidden doorHanger toolbarHorizontalGroup" id="findbar">
                    <div id="findInputContainer" class="toolbarHorizontalGroup">
                      <span class="loadingInput end toolbarHorizontalGroup">
                        <input id="findInput" class="toolbarField" placeholder="Search for">
                      </span>
                      <div class="toolbarHorizontalGroup">
                        <button id="findPreviousButton" class="toolbarButton" type="button" title="Find Previous"></button>
                        <div class="splitToolbarButtonSeparator"></div>
                        <button id="findNextButton" class="toolbarButton" type="button" title="Find Next"></button>
                      </div>
                    </div>
                    <div id="findbarOptionsOneContainer" class="toolbarHorizontalGroup">
                      <div class="toggleButton toolbarLabel">
                        <input type="checkbox" id="findHighlightAll"/>
                        <label for="findHighlightAll" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight All</label>
                      </div>
                      <div class="toggleButton toolbarLabel">
                        <input type="checkbox" id="findMatchCase"/>
                        <label for="findMatchCase" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match Case</label>
                      </div>
                    </div>
                    <div id="findbarOptionsTwoContainer" class="toolbarHorizontalGroup">
                      <div class="toggleButton toolbarLabel">
                        <input type="checkbox" id="findMatchDiacritics"/>
                        <label for="findMatchDiacritics" data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match Diacritics</label>
                      </div>
                      <div class="toggleButton toolbarLabel">
                        <input type="checkbox" id="findEntireWord"/>
                        <label for="findEntireWord" data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole Words</label>
                      </div>
                    </div>
                    <div id="findbarMessageContainer" class="toolbarHorizontalGroup">
                      <span id="findResultsCount" class="toolbarLabel"></span>
                      <span id="findMsg" class="toolbarLabel"></span>
                    </div>
                  </div>  <!-- findbar -->
                </div>
                <div class="toolbarButtonSpacer"></div>
              </div>
              <div id="toolbarViewerMiddle" class="toolbarHorizontalGroup">
                <div class="toolbarHorizontalGroup">
                  <button id="zoomOutButton" class="toolbarButton" type="button" title="Zoom Out"></button>
                  <div class="splitToolbarButtonSeparator"></div>
                  <button id="zoomInButton" class="toolbarButton" type="button" title="Zoom In"></button>
                </div>
                <span id="scaleSelectContainer" class="dropdownToolbarButton">
                  <select id="scaleSelect">
                    <option id="pageAutoOption" value="auto" selected="selected">Automatic Zoom</option>
                    <option id="pageFitOption" value="page-fit">Page Fit</option>
                    <option id="customScaleOption" value="custom" disabled="disabled" hidden="true" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
                    <option value="0.5">50%</option>
                    <option value="0.75">75%</option>
                    <option value="1">100%</option>
                    <option value="1.25">125%</option>
                    <option value="1.5">150%</option>
                    <option value="2">200%</option>
                  </select>
                </span>
                <div class="toolbarButtonSpacer"></div>
                <div class="toolbarHorizontalGroup hiddenSmallView">
                  <button class="toolbarButton" type="button" id="previous" title="Previous Page"></button>
                  <div class="splitToolbarButtonSeparator"></div>
                  <button class="toolbarButton" type="button" id="next" title="Next Page"></button>
                </div>
                <div class="toolbarHorizontalGroup">
                  <span class="loadingInput start toolbarHorizontalGroup">
                    <input type="number" id="pageNumber" class="toolbarField" value="1" min="1" autocomplete="off">
                  </span>
                  <span id="numPages" class="toolbarLabel"></span>
                </div>
              </div>
              <div id="toolbarViewerRight" class="toolbarHorizontalGroup">
                <div class="toolbarHorizontalGroup toolbarLabel">
                  <img src="{% static 'images/logo.svg' %}" class="logo hiddenSmallView">
                  <span class="hiddenSmallView hiddenMediumView" style="font-size: medium;font-weight: bold; color: rgb({{ theme_color }});">PdfDing</span>
                  <div class="toolbarButtonSpacer hiddenSmallView hiddenMediumView"></div>
                </div>
                <div class="toolbarHorizontalGroup" >
                  {% if user_view_bool %}
                  <button onclick="update_pdf()" class="button1" title="Save">
                    <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
                      <!--Source: https://www.svgrepo.com/svg/502821/save-->
                      <!--License: PD-->
                      <path opacity="0.6" d="M4 6C4 4.89543 4.89543 4 6 4H12H14.1716C14.702 4 15.2107 4.21071 15.5858 4.58579L19.4142 8.41421C19.7893 8.78929 20 9.29799 20 9.82843V12V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path opacity="0.6" d="M8 4H13V7C13 7.55228 12.5523 8 12 8H9C8.44772 8 8 7.55228 8 7V4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path opacity="0.6" d="M7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V20H7V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                  {% endif %}
                </div>
                {% if user_view_bool %}
                <div id="editorModeButtons" class="toolbarHorizontalGroup" role="radiogroup">
                  <div id="editorHighlight" class="toolbarButtonWithContainer">
                    <button id="editorHighlightButton" class="toolbarButton" type="button" title="Highlight">
                      <span>Highlight</span>
                    </button>
                    <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
                      <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
                        <div id="editorHighlightColorPicker" class="colorPicker">
                          <span id="highlightColorPickerLabel" class="editorParamsLabel">Highlight color</span>
                        </div>
                        <div id="editorHighlightThickness">
                          <label for="editorFreeHighlightThickness" class="editorParamsLabel">Thickness</label>
                          <div class="thicknessPicker">
                            <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider" value="12" min="8" max="24" step="1">
                          </div>
                        </div>
                        <div id="editorHighlightVisibility">
                          <div class="divider"></div>
                          <div class="toggler">
                            <label for="editorHighlightShowAll" class="editorParamsLabel">Show all</label>
                            <button id="editorHighlightShowAll" class="toggle-button" type="button" aria-pressed="true"></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="editorFreeText" class="toolbarButtonWithContainer">
                    <button id="editorFreeTextButton" class="toolbarButton" type="button" title="Annotation">
                      <span>Text</span>
                    </button>
                    <div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
                      <div class="editorParamsToolbarContainer">
                        <div class="editorParamsSetter">
                          <label for="editorFreeTextColor" class="editorParamsLabel">Color</label>
                          <input type="color" id="editorFreeTextColor" class="editorParamsColor">
                        </div>
                        <div class="editorParamsSetter">
                          <label for="editorFreeTextFontSize" class="editorParamsLabel">Size</label>
                          <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100" step="1">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="editorInk" class="toolbarButtonWithContainer">
                    <button id="editorInkButton" class="toolbarButton" type="button" title="Draw">
                      <span>Draw</span>
                    </button>
                    <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
                      <div class="editorParamsToolbarContainer">
                        <div class="editorParamsSetter">
                          <label for="editorInkColor" class="editorParamsLabel">Color</label>
                          <input type="color" id="editorInkColor" class="editorParamsColor">
                        </div>
                        <div class="editorParamsSetter">
                          <label for="editorInkThickness" class="editorParamsLabel">Thickness</label>
                          <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1">
                        </div>
                        <div class="editorParamsSetter">
                          <label for="editorInkOpacity" class="editorParamsLabel">Opacity</label>
                          <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="1" min="0.05" max="1" step="0.05">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="splitToolbarButtonSeparator hiddenSmallView" style="margin: 4px;"></div>
                {% endif %}
                <div id="secondaryToolbarToggle" class="toolbarButtonWithContainer">
                  <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" tabindex="0" title="Tools" aria-expanded="false" aria-haspopup="true" aria-controls="secondaryToolbar">
                  </button>
                  <div id="secondaryToolbar" class="hidden doorHangerRight menu">
                    <div id="secondaryToolbarButtonContainer" class="menuContainer">
                      <div >
                        <button id="secondaryPrint" class="toolbarButton labeled" type="button" tabindex="0">
                          <span>Print</span>
                        </button>
                        <button id="secondaryDownload" class="toolbarButton labeled" type="button" tabindex="0">
                          <span>Download</span>
                        </button>
                      </div>
                      <button id="firstPage" class="toolbarButton labeled" type="button" tabindex="0">
                        <span>Go to first page</span>
                      </button>
                      <button id="lastPage" class="toolbarButton labeled" type="button" tabindex="0">
                        <span>Go to last page</span>
                      </button>
                      <div class="horizontalToolbarSeparator"></div>
                      <div id="cursorToolButtons" role="radiogroup">
                        <button id="cursorSelectTool" class="toolbarButton labeled toggled" type="button" tabindex="0" role="radio" aria-checked="true">
                          <span>Text Selection Tool</span>
                        </button>
                        <button id="cursorHandTool" class="toolbarButton labeled" type="button" tabindex="0" role="radio" aria-checked="false">
                          <span>Hand Tool</span>
                        </button>
                      </div>
                      <div class="horizontalToolbarSeparator"></div>
                      <div id="scrollModeButtons" role="radiogroup">
                        <button id="scrollPage" class="toolbarButton labeled" type="button" tabindex="0" role="radio" aria-checked="false">
                          <span>Page Scrolling</span>
                        </button>
                        <button id="scrollVertical" class="toolbarButton labeled toggled" type="button" tabindex="0" role="radio" aria-checked="true">
                          <span>Vertical Scrolling</span>
                        </button>
                        <button id="scrollHorizontal" class="toolbarButton labeled" type="button" tabindex="0" role="radio" aria-checked="false">
                          <span>Horizontal Scrolling</span>
                        </button>
                        <button id="scrollWrapped" class="toolbarButton labeled" type="button" tabindex="0" role="radio" aria-checked="false">
                          <span>Wrapped Scrolling</span>
                        </button>
                      </div>
                      <div class="horizontalToolbarSeparator"></div>
                      <div id="spreadModeButtons" role="radiogroup">
                        <button id="spreadNone" class="toolbarButton labeled toggled" type="button" tabindex="0" role="radio" aria-checked="true">
                          <span>No Spreads</span>
                        </button>
                        <button id="spreadOdd" class="toolbarButton labeled" type="button" tabindex="0" role="radio" aria-checked="false">
                          <span>Odd Spreads</span>
                        </button>
                        <button id="spreadEven" class="toolbarButton labeled" type="button" tabindex="0" role="radio" aria-checked="false">
                          <span>Even Spreads</span>
                        </button>
                      </div>
                    </div>
                  </div>  <!-- secondaryToolbar -->
                </div>
                {% if user_view_bool %}
                <div class="toolbarHorizontalGroup hiddenSmallView">
                  <div class="splitToolbarButtonSeparator" style="margin: 4px;"></div>
                  {% if not request.META.HTTP_REFERER or 'pdf/view' in request.META.HTTP_REFERER or 'accountlogin' in request.META.HTTP_REFERER %}
                  <button onclick="location.href='{% url 'pdf_overview' %}'" class="button1" title="Close">
                  {% else %}
                  <button onclick="location.href='{{ request.META.HTTP_REFERER }}'" class="button1" title="Close">
                  {% endif %}
                    <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
                      <!-- source: https://www.svgrepo.com/svg/499592/close-x -->
                      <!-- license: PD -->
                      <path opacity="0.7" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"/>
                    </svg>
                  </button>
                </div>
                {% endif %}
              </div>
            </div>
            <div id="loadingBar">
              <div class="progress">
                <div class="glimmer">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="viewerContainer">
          <div id="viewer" class="pdfViewer"></div>
        </div>
      </div> <!-- mainContainer -->
      <div id="dialogContainer">
        <dialog id="passwordDialog">
          <div class="row">
            <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password to open this PDF file:</label>
          </div>
          <div class="row">
            <input type="password" id="password" class="toolbarField">
          </div>
          <div class="buttonRow">
            <button id="passwordCancel" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
            <button id="passwordSubmit" class="dialogButton" type="button"><span data-l10n-id="pdfjs-password-ok-button">OK</span></button>
          </div>
        </dialog>
        <dialog id="printServiceDialog" style="min-width: 200px;">
          <div class="row">
            <span>Preparing document for printing...</span>
          </div>
          <div class="row">
            <progress value="0" max="100"></progress>
            <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
          </div>
          <div class="buttonRow">
            <button id="printCancel" class="dialogButton" type="button"><span>Cancel</span></button>
          </div>
        </dialog>
      </div>  <!-- dialogContainer -->
      <div id="editorUndoBar" class="messageBar" role="status" aria-labelledby="editorUndoBarMessage" tabindex="-1" hidden>
        <div>
          <div>
            <span id="editorUndoBarMessage" class="description"></span>
          </div>
          <button id="editorUndoBarUndoButton" class="undoButton" type="button" title="Undo">
            <span>Undo</span>
          </button>
          <button id="editorUndoBarCloseButton" class="closeButton" type="button" title="Close">
            <span>Close</span>
          </button>
        </div>
      </div> <!-- editorUndoBar -->
    </div> <!-- outerContainer -->
    <div id="printContainer"></div>
  </body>

  {% if not user_view_bool %}
  <div id="editorFreeTextButton"></div><div id="editorFreeTextColor"></div><div id="editorFreeTextFontSize"></div>
  <div id="editorFreeHighlightThickness"></div><div id="editorHighlightButton"></div>
  <div id="editorHighlightShowAll"></div><div id="editorInkButton"></div><div id="editorInkColor"></div>
  <div id="editorInkThickness"></div><div id="editorInkOpacity"></div>
  {% endif %}

  <div id="viewAttachments"></div><div id="viewLayers"></div><div id="altTextSave"></div>
  <div id="editorStampButton"></div><div id="editorStampAddImage"></div><div id="altTextDialog"></div>
  <div id="downloadButton"></div><div id="printButton"></div><div id="secondaryOpenFile"></div>
  <div id="pageRotateCw"></div><div id="pageRotateCcw"></div><div id="documentProperties"></div>
  <div id="documentPropertiesDialog"></div><div id="documentPropertiesClose"></div><div id="presentationMode"></div>
  <div id="descriptionButton"></div><div id="decorativeButton"></div><div id="altTextCancel"></div>
  <div id="editorSignatureAddSignature"></div><div id="editorSignatureButton"></div>
  <div id="imageAltTextSettings"></div><div id="viewBookmark"></div>
</html>
